<template>
  <div>
    <el-dialog title="选择主合同"
               :visible.sync="mainProDialog"
               width="50%"
               :before-close="handleClose">
      <el-row :gutter="20">
        <el-form :model="requestParams"
                 label-width="120px">
          <el-col :span="18"
                  :offset="6">
            <el-form-item label="工程名称">
              <div class="condition-style">
                <el-input v-model="requestParams.project_name"
                          placeholder="请输入工程名称"></el-input>
                <el-button type="primary"
                           class="search-button"
                           icon="el-icon-search">查询</el-button>
                <el-button>重置</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table :data="tableData"
                      :highlight-current-row="true"
                      border
                      :header-cell-style="{ background: '#f5f5f5' }"
                      style="width: 100%">
              <el-table-column type="index"
                               label="序号"
                               width="100"
                               align="center">
              </el-table-column>
              <el-table-column prop="date"
                               label="合同编号"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="name"
                               label="工程名称"
                               width="180"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="address"
                               label="工程地址"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="address"
                               label="创建时间"
                               align="center"
                               show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="requestParams.page"
                           :page-sizes="[10, 20, 50, 100,200]"
                           :page-size="requestParams.page_size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-col>
          <el-col :span="24"
                  class="bottom-box">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary"
                       @click="onSure">确定</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    mainConInitProDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      mainProDialog: false,
      total: 0,
      tableData: [],
      requestParams: {
        project_name: '',
        page: 1,
        page_size: 10,
      }
    }
  },
  methods: {
    onSure () { //确定
      this.onCancel();//取消
    },
    onCancel () { //取消
      this.$emit('update:mainConInitProDialog', false);
      this.mainProDialog = false;
    },
    handleClose (done) {//弹框关闭前触发的事件
      this.onCancel();
      done();
    },
    // 分页
    handleCurrentChange (page) {
      this.requestParams.page = page;
    },
    handleSizeChange (val) {//每页显示的条数
      this.requestParams.page_size = val;
    },
  },
  watch: {
    mainConInitProDialog (n, o) {
      this.mainProDialog = n;
    }
  },
  created () {
    this.mainProDialog = this.mainConInitProDialog;
  }
}
</script>

<style lang="scss" scoped>
.condition-style {
  display: flex;
  flex-direction: row;
  .search-button {
    margin-left: 12px;
  }
}
.bottom-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>